<template>
  <div id="individual-needs">
    <c-title text="技能服务"></c-title>
    <!-- <img class="bg-img" :src="dataDetail.pic_url" alt="" /> -->
    <van-swipe class="bg-img" :show-indicators="false">
      <van-swipe-item>
        <img class="bg-img" :src="dataDetail.pic_url" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <video :src="dataDetail.video_url" class="bg-img" controls webkit-playsinline="true" playsinline="true" x5-video-ignore-metadata="true"></video>
      </van-swipe-item>
    </van-swipe>
    <div class="top-name">
      <div class="name-op">{{dataDetail.title}}</div>
      <div class="op-pane">
        <div class="price-op">{{dataDetail.fee}}<span class="price-sym">元/次</span></div>
        <span class="sold">已售 {{dataDetail.service_order_num}}</span>
      </div>
    </div>
    <div class="content-pane">
      <div class="left">
        <span class="technician-name">技师：</span>
        <img :src="dataDetail.has_one_shifu ? dataDetail.has_one_shifu.personal_pic : ''" alt="" class="actor-img" v-if="dataDetail.has_one_shifu && dataDetail.has_one_shifu.personal_pic">
        <span class="true-name">{{dataDetail.has_one_shifu ? dataDetail.has_one_shifu.realname : ''}}</span>
      </div>
      <div class="location-sty"><img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_local (1).png" alt="" class="img-icon">{{dataDetail.has_one_shifu ? dataDetail.has_one_shifu.distance : ""}}
      {{dataDetail.has_one_shifu ? dataDetail.has_one_shifu.unit : ""}}</div>
    </div>
    <div class="content-detail">{{dataDetail.desc}}</div>
    <bottom-bar type="skill_service" :mobile="`tel:${dataDetail.has_one_shifu.mobile}`" v-if="info" :skillService="dataDetail"></bottom-bar>
  </div>
</template>
<script>
import skill_service_controller from "./skill_service_controller";

export default skill_service_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#individual-needs {
  .bg-img {
    height: 16.55rem;
    margin: 0;
    width: 100%;
    object-fit: contain;
  }

  .top-name {
    background: white;
    padding: 0.6rem;

    .name-op {
      font-size: 0.9rem;
      font-weight: bold;
      color: #333;
      margin-bottom: 0.6rem;
      line-height: 1;
      text-align: left;
    }

    .op-pane {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price-op {
        font-size: 0.9rem;
        font-weight: 500;
        color: #ff9c43;

        .price-sym {
          font-size: 0.55rem;
          font-weight: 400;
          color: #ff9c43;
        }
      }

      .sold {
        font-size: 0.7rem;
        font-weight: 400;
        color: #999;
      }
    }
  }

  .content-pane {
    background: white;
    padding: 0.6rem;
    display: flex;
    margin-top: 0.6rem;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .technician-name {
        font-size: 0.85rem;
        font-weight: 400;
        color: #999;
        white-space: nowrap;
      }

      .actor-img {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0;
        border-radius: 50%;
      }

      .true-name {
        font-size: 0.8rem;
        font-weight: 400;
        color: #090909;
        margin-left: 0.2rem;
        text-align: left;
        width: 80%;
      }
    }

    .location-sty {
      font-size: 0.8rem;
      font-weight: 400;
      color: #999;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
  }

  .content-detail {
    margin-top: 0.6rem;
    padding: 0.6rem;
    background: white;
    text-align: left;
    font-size: 0.8rem;
  }

  .img-icon {
    width: 0.85rem !important;
    height: 0.85rem !important;
  }
}
</style>
